<template>
  <div class="coupon-list">
    <div class="amount">
      <div class="m-price">{{item.coupon_price}}</div>
      <div class="name" v-if="item.threshold_type===1">满{{item.full_coupon_price}}元可用</div>
      <div class="name" v-if="item.threshold_type===2">抵{{item.deduction_price}}%商品金额</div>
    </div>
    <div class="info">
      <div>

        <div class="store">{{item.shop_name}}</div>
        <!-- <div class="store" v-if="item.shop_ids">限部分店铺使用</div> -->
        <div class="store-text">{{item.cat_ids ? '限部分商品使用': '无限制使用'}}</div>
        <!-- <div class="time" v-if="item.usr_type===2">{{item.start_time | formatDate('YYYY.MM.DD')}} - {{item.end_time | formatDate('YYYY.MM.DD')}}</div> -->
        <div class="time">{{item.start_time | formatDate('YYYY.MM.DD')}} - {{item.end_time | formatDate('YYYY.MM.DD')}}</div>
      </div>
    </div>
    <div class="operation flex-center">
      <span class="btn" v-if="state===1" @click="collectCoupon(item.id)">
        <van-loading size="16" color="#fff" v-if="isLoading" />
        <span v-else>领取</span>
      </span>
      <span class="btn disable" v-if="state===2">已领</span>
      <span class="btn" v-if="state===3" @click="onChange(item)">使用</span>
      <span class="beenused" v-if="item.status ===1"></span>
      <span class="expired" v-if="item.status ===2"></span>
    </div>
  </div>
</template>
<script>
export default {
  name: 'CouponList',
  data() {
    return {
      isLoading: false
    };
  },
  props: {
    state: {
      type: Number
    },
    item: {
      type: Object
    }
  },
  methods: {
    // 领取优惠劵
    collectCoupon(id) {
      this.isLoading = true;
      this.$API.user.collectCoupon({ id }).then(res => {
        if (!res.code) {
          this.$toast('领取成功');
          this.$emit('success');
        }
        this.isLoading = false;
      });
    },
    // 点击
    onChange(item) {
      this.$emit('change', item);
    }
  }
};
</script>
<style scoped lang="less">
.coupon-list {
  display: flex;
  background-color: #fff;
  margin-top: 20px;
  .amount {
    width: 205px;
    text-align: center;
    color: #fff;
    padding: 10px 0 20px;
    background: linear-gradient(259deg, rgba(239, 0, 62, 1) 0%, rgba(253, 32, 77, 1) 100%, rgba(255, 39, 83, 1) 100%);
    .m-price {
      font-size: 70px;
      font-weight: 800;
      &::before {
        font-size: 32px;
        margin-top: 26px;
      }
    }
    .name {
      font-size: 24px;
    }
  }
  .info {
    flex: 1;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    .store {
      font-size: 28px;
      font-weight: 800;
      color: #353535;
      padding: 10px 0;
    }
    .store-text,
    .time {
      font-size: 24px;
      color: #959595;
      // display: inline-flex;
      align-items: center;
    }
    .store-text {
      &::after {
        content: '';
        display: inline-block;
        width: 30px;
        height: 30px;
        background-image: url('/static/img/icon-arrow_right.png');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
      }
    }
    .time {
      padding-top: 10px;
    }
  }
  .flex-end {
    align-items: flex-end;
    padding: 0 0 15px 0;
  }
  .flex-center {
    align-items: center;
  }
  .operation {
    display: flex;
    .btn {
      display: block;
      width: 90px;
      text-align: center;
      color: #fff;
      font-size: 24px;
      height: 44px;
      margin-right: 15px;
      line-height: 46px;
      background: linear-gradient(259deg, rgba(239, 0, 62, 1) 0%, rgba(253, 32, 77, 1) 100%, rgba(255, 39, 83, 1) 100%);
      border-radius: 44px;
    }
    .btn.disable {
      background: #eee;
      color: #959595;
    }
    .expired,
    .beenused {
      display: block;
      width: 132px;
      height: 99px;
      margin-right: 10px;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 132px 99px;
    }
    .expired {
      background-image: url('/static/img/icon-expired.png');
    }
    .beenused {
      background-image: url('/static/img/icon-beenused.png');
    }
  }
}
</style>
